<template>
  <!--  TODO 列表显示题库完整信息，  支持进入题库查看该题库的题目-->
  <div class="questionBank-body">
    <el-table
        :data="bankData.records"
        stripe
        style="width: 100%"
        :border="true"
        @selection-change="handleSelectionChange"
        ref="multipleTable">
      <el-table-column type="selection"/>
      <el-table-column
          type="index"
          label="序号"
          width="81px">
        <template slot-scope="scope">
          {{ (bankData.current - 1) * bankData.size + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column
          prop="bankName"
          label="题库名">
      </el-table-column>
      <el-table-column
          prop="imgPath"
          label="题库封面">
        <template slot-scope="scope">
          <el-image
              style="height: 100px;width: 100px"
              :src="imgUrl + scope.row.imgPath"
              class="img">
          </el-image>
        </template>
      </el-table-column>
      <el-table-column
          prop="userId"
          label="用户id">
      </el-table-column>
      <el-table-column
          prop="remark"
          label="备注">
      </el-table-column>
      <el-table-column
          prop="status"
          label="状态">
        <template slot-scope="scope">
          <span v-if="scope.row.status === 0">未启用</span>
          <span v-else-if="scope.row.status === 1">已启用</span>
          <span v-else>错误状态</span>
        </template>
      </el-table-column>
      <el-table-column
          label="操作"
          fixed="right"
          width="240px">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="enterQuestion(scope.row.id)">查看题库</el-button>
          <el-button size="mini" type="success" @click="through(scope.row.id)">通过</el-button>
          <el-button size="mini" type="danger" @click="rejected(scope.row.id)">驳回</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination
        background
        layout="prev, pager, next"
        :page-count="bankData.pages"
        :current-page.sync="query.current"
        class="pagination"
        @current-change="getQuestionBankData">
    </el-pagination>
  </div>
</template>

<script>
import { del, get } from "@/plugins/axios";

export default {
  name: "questionBankReview",
  created() {
    this.getQuestionBankData()
  },
  data() {
    const module = '/questionBankAudit'
    return {
      bankData: {},
      query: {
        current: 1,
        size: 5
      },
      uri: {
        list: module + '/joinPage',
        batchThrough: module + '/batchThrough',
        batchRejected: module + '/batchRejected'
      }
    }
  },
  methods: {
    getQuestionBankData() {
      get(this.uri.list, this.query, response => {
        if (response.code === 200) {
          this.bankData = response.data
        }
      })
    },
    through(id) {
      this.$confirm('是否将此题库通过审批?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const param = {
          idList: id
        }
        del(this.uri.batchThrough, param, response => {
          if (response.code === 200) {
            this.getQuestionBankData()
            this.$message({
              type: 'success',
              message: '通过审批!'
            })
          }
        })
      }).catch((error) => {
        this.$message({
          type: 'info',
          message: error === 'cancel' ? '操作已取消' : error
        });
      })
    },
    rejected(id) {
      this.$confirm('是否将此题库申请驳回?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const param = {
          idList: id
        }
        del(this.uri.batchRejected, param, response => {
          if (response.code === 200) {
            this.getQuestionBankData()
            this.$message({
              type: 'success',
              message: '申请驳回!'
            })
          }
        })
      }).catch((error) => {
        this.$message({
          type: 'info',
          message: error === 'cancel' ? '操作已取消' : error
        });
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    enterQuestion(id) {
      // 跳转路由
      this.$router.push({
        path: '/question/questionReview',
        query: {
          id: id
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.questionBank-body {
  padding: 5px 10px 20px 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  background: white;
  .pagination {
    margin-top: 8px;
  }
}
</style>